<template>
    <div>
        <div class="one"><span class="left" @click="fan">返回</span>
            <span class="content">{{city}}</span><span class="right" @click="fan2">切换城市</span>
        </div>
        <div class="shou">
            <van-cell-group>
                <van-field v-model="value" placeholder="输入学校,商务楼,地址"/>
                <van-button type="info" block @click="one()" class="button">提交</van-button>
            </van-cell-group>
        </div>
        <div class="show-root" v-if="msg">
            <p class="p1">历史记录</p>
            <div v-for="(v,k) in lishi1" :key="k" class="show" @click="lok(v,'l')">
                <h5>{{v.name}}</h5>
                <p>{{v.address}}</p>
            </div>
        </div>
        <div class="show-root" v-else>
            <div v-for="(v,k) in SC" :key="k" class="show" @click="lok(v,'s')">
<h5>{{v.name}}</h5>
                <p>{{v.address}}</p>
            </div>
        </div>
    </div>
</template>

<script>
    import {mapState} from "vuex";

    export default {
        name: "Top2",
        data: () => {
            return {
                value: "",
                SC: "",
                lishiOBJ:{},
                lishiArray:[],
                msg:true,
            }
        },
        computed: {
            ...mapState(["city"]),
            lishi1(){
                return this.lishiArray
            }
        },
        created() {
            this.lishiArray=JSON.parse(localStorage.lissh2);
        },
        methods: {
            one() {
                this.axios.get("https://elm.cangdu.org/v1/pois?city_id=" + this.$route.query.id + "&keyword=" + this.value).then(data => {

                   this.msg=false;
                    this.SC= data.data;

                }).catch(error => {
                    console.log(error)
                });
            },
            lok(v,b){
            // 储存
              if (b=="s"){
                this.lishiArray.push(v)
                localStorage.lissh2=JSON.stringify(this.lishiArray);
              }
                //路由跳转
                this.$router.push("/index")
            },
            fan(){  
                 this.$router.go(-1)
            },
            fan2(){
                this.$router.push("/")
            }
        }
    }
</script>

<style scoped>
    .one {
        background-color: cornflowerblue;
        height: 40px;
        line-height: 40px;
        display: flex;
        justify-content: space-between;
        color: white;
    }
    .content {
        font-size: 20px;
    }
    .shou{
        padding: 20px 10px;
    }
    .show{
        padding-left: 20px;
        padding-right: 20px;
        margin: 0 auto;
        padding-top: .65rem;
        padding-bottom: .65rem;
        border-bottom: 1px solid #e4e4e4;
    }
    .show p{
        margin-top: 3px;
        color: darkgray;
        font-size: 6px;
        /*background-color: blue;*/
    }
    .p1{
        padding-left: 20px;
    }
    .button{
        margin-top: 10px;
    }

</style>